<template>
	<div class="footer">
		<div class="footer-container">
			<div class="footer-top">
				<div class="footer-link">
					<ul>
					  <li v-for="list in titleList">
              <div class="footer-list">
                <ul>
                  <li class="footer-title"><p>{{ list.theme }}</p></li>
                  <li v-for="item in list.title"><a :href="'/help?id=' + item.article_id">{{ item.article_title }}</a></li>
                </ul>
              </div>
          </li>
					</ul>
				</div>
				<div class="footer-contact">
					<p class="footer-contact-label">{{$t('message.serviceHotline')}}:</p>
					<p class="footer-telphone">02-1054607 to 102/104</p>
					<p class="footer-telphone">02-1054638 to 0</p>
					<p class="footer-contact-label concern-us">{{$t('message.focusUs')}}:</p>
					<div class="footer-icon-list">
						<ul>
							<li>
								<div class="footer-icon">
									<a href="https://www.facebook.com/ThishopOfficial" target="_blank">
										<img src="../assets/images/index/icon_facebook.png"/>
									</a>
								</div>
							</li>
							<li>
								<div class="footer-icon">
									<a href="https://twitter.com/ThishopOfficial" target="_blank">
										<img src="../assets/images/index/icon_twitter.png"/>
									</a>
								</div>
							</li>
<!-- 							<li class="no-margin-right">
								<div class="footer-icon">
									<a to="">
										<img src="../assets/images/index/icon_google+.png"/>
									</a>
								</div>
							</li> -->
						</ul>
					</div>
				</div>
			</div>
			<div class="footer-bottom">
				<p>@2010-2017 Thishop.com. All rights reserved.</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'TheFooter',
  data () {
    return {
      titleList: [],
      center: 1
    }
  },
  computed: {
    type () {
      if (window.lang === 'cn') {
        return 1
      } else if (window.lang === 'thai') {
        return 2
      } else {
        return 3
      }
    }
  },
  methods: {
    getTitleList () {
      this.$ajax.getHelpList(this.type, this.center).then((res) => {
        if (res.code === 200) {
          this.titleList = res.data
        }
      })
    }
  },
  created () {
    this.getTitleList()
  }
}
</script>

<style scoped>
.footer {
	min-width: 1200px;
	background-color: #333;
}

.footer-container {
	width: 1200px;
	margin: 0 auto;
}

.footer-top {
	padding: 60px 0 40px;
	border-bottom: 1px solid rgba(102, 102, 102, 0.3);
}

.footer-top:after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}

.footer-link {
	float: left;
	max-width: 1000px;
}

.footer-link > ul {
	overflow: hidden;
}

.footer-link > ul > li {
	float: left;
	margin-right: 100px;
}

.footer-link > ul > li:last-child {
  margin-right: 0;
}

.footer-list {

}

.footer-list li {
	height: 20px;
	margin-bottom: 18px;
}

.footer-list li:last-child {
  margin-bottom: 0;
}

.footer-list a {
	color: #666;
	font-size: 14px;
	line-height: 20px;
}

.footer-list .footer-title {
	font-size: 14px;
	line-height: 20px;
	color: #999999;
	margin-bottom: 30px;
	font-weight: bold;
}


.footer-contact {
	float: right;
}

.footer-contact-label {
	height: 17px;
	line-height: 17px;
	font-size: 12px;
	color: #666;
}

.footer-telphone {
	height: 34px;
	line-height: 34px;
	color: #fff;
	font-size: 28px;
	margin-top: 12px;
}

.concern-us {
	margin-top: 32px;
}

.footer-icon-list {
	margin-top: 12px;
}

.footer-icon-list ul {
	overflow: hidden;
}

.footer-icon-list li {
	float: left;
	margin-right: 12px;
}

.footer-icon {
	width: 32px;
	height: 32px;
}

.footer-icon img {
	width: 100%;
	height: 100%;
}

.footer-bottom {
	height: 65px;
}

.footer-bottom p {
	height: 17px;
	line-height: 17px;
	color: #666;
	font-size: 12px;
	text-align: center;
	padding-top: 24px;
}
</style>
